<template>
  <BasicTable @register="registerTable">
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" />
    </template>
  </BasicTable>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { ActionItem, BasicTable, TableAction, useTable } from '@/components/Table';
  import { columns, searchFormSchema } from './Detail.data';
  import { FormOutlined } from '@ant-design/icons-vue';
  import { detailList } from '@/views/bi/collect/mange/index.api';
  import { useRoute } from 'vue-router';
  const route = useRoute();

  const [registerTable, { reload }] = useTable({
    api: () => {
      console.log('route', route.query.id);
      return detailList({id: route.query.id});
    },
    // dataSource: mockData,
    columns: columns,
    bordered: false,
    rowKey: 'id',
    canResize: false,
    useSearchForm: true,
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
    formConfig: {
      schemas: [
        {
          field: 'date',
          label: '时间',
          component: 'DatePicker',
          componentProps: {
            type: 'daterange',
            valueFormat: 'YYYY-MM-DD',
            format: 'YYYY-MM-DD',
            onChange: () => {
              alert('change time');
            },
          },
          colProps: {
            span: 6,
          },
        },
      ],
      showAdvancedButton: false,
      showSubmitButton: false,
      showResetButton: false,
      autoSubmitOnEnter: false,
      labelWidth: 100,
      baseColProps: { span: 8 }, // 调整为每行3个表单项
      rowProps: {
        gutter: 24, // 增加间距
      },
      labelCol: {
        style: {
          width: '100px',
          textAlign: 'right',
        },
      },
      wrapperCol: {
        style: {
          width: 'calc(100% - 100px)',
          flex: 1,
        },
      },
      // 增加组件统一样式配置
      componentProps: {
        style: {
          width: '100%', // 组件宽度占满容器
        },
      },
    },
    pagination: true,
  });

  /**
   * 查看信息
   * @param record
   */
  const handleCheckInfo = async (record) => {
    //TODO: 查看信息
  };

  /**
   * 操作栏
   */

  function getTableAction(record): ActionItem[] {
    return [
      {
        label: '查看信息',
        onClick: handleCheckInfo.bind(null, record),
      },
    ];
  }
</script>

<style scoped lang="less">
  :deep(.ant-picker) {
    width: 100%;
  }
  .tableEditIcon {
    font-size: 18px;
    cursor: pointer;
    &:hover {
      color: #1890ff;
    }
  }
</style>
